<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        style="width:280px;"
        placeholder="请输入订单编号"
        class="search"
        v-model="searchData"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
          >搜索</el-button
        >
      </el-input>
      <!-- 数据列表 -->
      <el-table :data="tableData" border @row-click="getDetails">
        <el-table-column
          prop="order_number"
          label="订单编号"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="is_distribution_title"
          label="分配模式"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="agency"
          label="机构"
          width="210"
        ></el-table-column>
        <el-table-column prop="fujian" label="附件">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="下载"
              placement="top"
              :enterable="false"
            >
              <a
                v-if="scope.row.service_file"
                :href="scope.row.service_file"
                :download="scope.row.service_file"
                @click.stop="a"
                ><span class="iconfont iconxiazai"></span
              ></a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="签字文件">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="预览"
              placement="top"
              :enterable="false"
            >
              <a
                v-if="scope.row.sign_file"
                :href="scope.row.sign_file"
                target="_blank"
                @click.stop="a"
                ><span class="iconfont iconyulan"></span
              ></a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="OA截图">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="预览"
              placement="top"
              :enterable="false"
            >
              <a
                v-if="scope.row.oa_img"
                :href="scope.row.oa_img"
                target="_blank"
                @click.stop="a"
                ><span class="iconfont iconyulan"></span
              ></a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="rmb_voucher" label="报销凭证号" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.rmb_voucher">{{
              scope.row.rmb_voucher
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="service_type" label="服务类型">
          <template slot-scope="scope">{{
            scope.row.service_type | type
          }}</template>
        </el-table-column>
        <el-table-column prop="service_project" label="服务项目" width="100">
          <template slot-scope="scope">{{
            scope.row.service_project | project
          }}</template>
        </el-table-column>
        <el-table-column label="服务时间(天)" width="120">
          <template slot-scope="scope">{{ scope.row.service_time }}</template>
        </el-table-column>
        <el-table-column prop="quoted_price" label="报价(元)" width="100">
          <template slot-scope="scope">{{ scope.row.quoted_price }}</template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="150">
          <template slot-scope="scope">
            <span :class="scope.row.status | statusColor">{{
              scope.row.status | status
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否报销至公务卡">
          <template slot-scope="scope">{{
            scope.row.is_official_card == 1 ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column prop="is_valid" label="是否默认有效">
          <template slot-scope="scope">{{
            scope.row.is_valid == 1 ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="190"
        ></el-table-column>
        <el-table-column
          prop="updated_at"
          label="更新时间"
          width="190"
        ></el-table-column>
        <el-table-column prop="updated_at" label="完成时间" width="190">
          <template slot-scope="scope">
            <span :class="scope.row.status | isWanc">{{
              scope.row.status == 4 ? scope.row.updated_at : "未完成"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          style="text-align: center;"
        >
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="dark" content="详情" placement="top" :enterable='false'>
                            <el-button size="mini" type="warning"  @click="getDetails(scope.row)">
                                <i class="el-icon-s-operation" style="margin:0 auto"></i>
                            </el-button>
                        </el-tooltip> -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配订单"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="warning"
                @click.stop="fpOrder(scope.row)"
              >
                <i class="el-icon-setting" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="异常订单处理"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="danger"
                @click.stop="abnormalOrders(scope.row.id, scope.row)"
              >
                <i class="el-icon-notebook-2" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="将订单状态从“代报员退回”改为“代报员处理中"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="success"
                @click.stop="abnormalOrdersActionA(scope.row.id)"
              >
                <i class="el-icon-notebook-1" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[15, 20, 50, 80]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </el-card>
    <el-dialog
      title="订单详情"
      style="text-align: center;"
      :visible.sync="dialogDetail"
      width="80%"
      :show-close="Flag"
      :close-on-press-escape="Flag"
      :close-on-click-modal="Flag"
      @close="closeDialog"
    >
      <div class="detailmax">
        <div class="detailes" v-if="DetailsData.info">
          <div class="head">订单具体信息</div>
          <div class="veriRevi">
            <span>订单编号</span
            ><span>{{ DetailsData.info.order_number }}</span>
          </div>
          <div class="veriRevi">
            <span>机构</span><span>{{ DetailsData.info.agency }}</span>
          </div>
          <div class="veriRevi">
            <span>服务项目</span
            ><span>{{ DetailsData.info.service_project | project }}</span>
          </div>
          <div class="veriRevi">
            <span>服务类型</span
            ><span>{{ DetailsData.info.service_type | type }}</span>
          </div>
          <div class="veriRevi">
            <span>服务时间</span
            ><span>{{ DetailsData.info.service_time + "天" }}</span>
          </div>
          <div class="veriRevi">
            <span>是否报销至公务卡</span
            ><span>{{
              DetailsData.info.is_official_card == 1 ? "是" : "否"
            }}</span>
          </div>
          <div class="veriRevi">
            <span>是否默认有效</span
            ><span>{{ DetailsData.info.is_valid == 1 ? "是" : "否" }}</span>
          </div>
          <div class="veriRevi">
            <span>报价</span
            ><span>{{ DetailsData.info.quoted_price + "元" }}</span>
          </div>
          <div class="veriRevi">
            <span>创建金额</span><span>{{ DetailsData.info.created_at }}</span>
          </div>
          <div class="veriRevi">
            <span>最后一次修改时间</span
            ><span>{{ DetailsData.info.updated_at }}</span>
          </div>
        </div>
        <div class="detailes">
          <div class="head">订单流程进度</div>
          <el-steps
            direction="vertical"
            space="60px"
            finish-status="success"
            v-if="DetailsData.order_has_statuses"
            :active="DetailsData.order_has_statuses.length"
          >
            <el-step
              v-for="(item, index) in DetailsData.order_has_statuses"
              :key="index"
              :title="item.describe"
              :description="item.created_at"
            ></el-step>
          </el-steps>
        </div>
        <div class="detailes">
          <div class="head">订单流转状态</div>
          <el-table :data="DetailsData.order_records" border>
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="reason" label="原因"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                {{ scope.row.type | rescords }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-button type="success" @click="dialogDetail = false">确定</el-button>
    </el-dialog>
    <el-dialog
      title="分配订单"
      style="text-align: center;"
      :visible.sync="dialogfpOrder"
      width="35%"
      :show-close="Flag"
      :close-on-press-escape="Flag"
      :close-on-click-modal="Flag"
      @close="closeDialog"
    >
      <el-form class="demo-ruleForm" label-width="90px">
        <el-form-item label="订单编号:">
          <span>{{ rowData.order_number }}</span>
        </el-form-item>
        <el-form-item label="机构:">
          <span>{{ rowData.agency }}</span>
        </el-form-item>
        <el-form-item label="代报员:" required>
          <el-select v-model="defsel">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="warning" @click="dialogfpOrder = false">取消</el-button>
      <el-button type="success" @click="trueFp">确定</el-button>
    </el-dialog>
    <!-- 权限设置页 -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="dialogRole"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRole = false">取 消</el-button>
        <el-button type="primary" @click="dialogRole = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { get } from "../../../../public/API/query";
import config from "../../../../public/config";

export default {
  data() {
    return {
      baseUrls: config.get("app_url"),
      //分配的代报员
      dby: "",
      options: [],
      //默认分配
      defsel: "",
      DetailsData: {},
      fpddform: {
        ddnum: "",
        jigou: "",
        dbyname: "",
      },
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 15,
      //总条数
      count: null,
      dialogVisible: false,
      currentPage4: 1,
      searchData: "",
      value: [],
      // 树形控件的属性绑定对象
      defaultProps: {
        children: "_child",
        label: "title",
      },
      treeData: [],
      dialogfpOrder: false,
      dialogDetail: false,
      Flag: false,
      addGroupForm: {
        title: "",
      },
      //默认选择节点ID数组
      defaultKeys: [],
      isDisabled: false,
      userId: "",
      rowData: {},
    };
  },
  filters: {
    isWanc(value) {
      switch (value) {
        case 4:
          return "iswanc";
          break;
        default:
          return "unwanc";
          break;
      }
    },
  },
  methods: {
    a() {},
    getDetails(value) {
      this.rowData = value;
      get("operate/orders/detail", { id: value.id }, (res) => {
        this.DetailsData = res.data;
      });
      this.dialogDetail = true;
    },
    fpOrder(value) {
      this.rowData = value;
      get("operate/orders/distributionPage", { id: this.rowData.id }, (res) => {
        this.dialogfpOrder = true;
        this.options = res.data.users;
        this.defsel = "";
      });
    },
    trueFp() {
      get(
        "operate/orders/distributionSub",
        { id: this.rowData.id, users_id: this.defsel },
        (res) => {
          if (res.code == 200) {
            this.dialogfpOrder = false;
          }
        }
      );
    },
    fpdd() {
      this.dialogfpOrder = true;
    },
    //获取数据
    getTableData() {
      if (this.searchData) {
        get(
          "operate/orders/index",
          {
            p: this.p,
            limit: this.limit,
            title: this.searchData,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      } else {
        get(
          "operate/orders/index",
          {
            p: this.p,
            limit: this.limit,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      }
    },
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData();
    },
    closeDialog() {
      this.Flag = true;
    },
    //将订单状态从“代报员退回”改为“代报员处理中”
    abnormalOrdersActionA(id) {
      console.log(id);
      get("operate/orders/abnormalOrdersActionA", { id }, (res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 异常订单处理
    abnormalOrders(id, data) {
      get(
        "operate/orders/abnormalOrders",
        { id, p: this.p, limit: this.limit },
        (res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
        }
      );
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.iswanc {
  color: green;
}
.unwanc {
  color: red;
}
.detailmax {
  display: flex;
  .detailes:last-child {
    width: 36%;
  }
  .detailes:nth-child(2) {
    padding-left: 40px;
  }
  .detailes {
    width: 27%;
    margin-right: 40px;
    margin-bottom: 50px;
    .head {
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .veriRevi {
      width: 100%;
      margin-top: 10px;
      span:nth-child(1) {
        width: 35%;
        text-align: left;
      }
      span:nth-child(2) {
        width: 65%;
        text-align: right;
      }
      &:last-of-type {
        margin-bottom: 20px;
      }
    }
  }
}

.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin-bottom: 30px;
  width: 280px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
</style>
